<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

interface typeCarousel{
    id:number,
    buleImg:string,
    yellowImg:string,
    text:string,
    isBlue:boolean
}
const container=ref()
onMounted(()=>{
     for(let a=0;a<container.value.children.length;a++){
        container.value.children[a].style['animation-delay']=`${-5-a*3.3}s,-${a*3.3}s,-${a*3.3}s`
    }
})
const carousel=reactive<Array<typeCarousel>>([
    {
        id:1,
        buleImg:'/src/assets/images/houtai.png',
        yellowImg:'/src/assets/images/houtai.png',
        text:'后台管理系统',
        isBlue:true
    },
    {
        id:2,
        buleImg:'/src/assets/images/yuyin.png',
        yellowImg:'/src/assets/images/yuyin.png',
        text:'语音训练系统',
        isBlue:true
    },
    {
        id:3,
        buleImg:'/src/assets/images/yuejuan.png',
        yellowImg:'/src/assets/images/yuejuan.png',
        text:'阅卷平台',
        isBlue:true
    },
    {
        id:4,
        buleImg:'/src/assets/images/shixun.png',
        yellowImg:'/src/assets/images/shixun.png',
        text:'实训管理平台',
        isBlue:true
    },
    {
        id:5,
        buleImg:'/src/assets/images/Api.png',
        yellowImg:'/src/assets/images/Api.png',
        text:'Api系统',
        isBlue:true
    },
    {
        id:6,
        buleImg:'/src/assets/images/bawei.png',
        yellowImg:'/src/assets/images/bawei.png',
        text:'八维实训平台',
        isBlue:true
    },
])
const change=(id:number)=>{
    let obj=carousel.find(item=>item.id===id) 
    obj.isBlue=!obj.isBlue
    for(let a=0;a<container.value.children.length;a++){
        container.value.children[a].style['animation-play-state']=obj.isBlue?'running':'paused'
    }
}
const onclick=(text:string)=>{
    alert(text)
}
</script>

<template>
    <div class="carousmu" ref="container">
        <div v-for="item in carousel" :key="item.id" class="img" @mouseenter="change(item.id)" @mouseleave="change(item.id)" @click="onclick(item.text)">
            <img v-show="item.isBlue" :src="item.buleImg" alt="">
             <img v-show="!item.isBlue" :src="item.yellowImg" alt="">
             <p>{{ item.text }}</p>
        </div>
    </div>
</template>

<style scoped lang="scss">
@keyframes moveX{
    0%{
        left: -60px;
    }
    100%{
        left: 80%;
    }
}
@keyframes moveY{
    0%{
        top: 0px;
    }
    100%{
        top: 380px;
    }
}
@keyframes moveScale{
    0%{
        transform: scale(0.6);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.6);
    }
}
.carousmu {
    margin-top: 200px;
    position: relative;
    height: 500px;
    // border: #f00 solid 1px;
    img{
        width: 140px;
        height: 140px;
    }
    .img{
        width: 200px;
        height: 200px;
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        position: absolute;
        // border: #fff solid 1px;
        left: 0;
        top: 0;
        color: #fff;
        animation-name: moveX,moveY,moveScale;
        animation-duration: 10s,10s,20s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(0.36,0,0.64,1);
    }
}
</style>
